<template>
  <div>
    <div class="content_box" v-for="(item,index) in tittleBoxList" :key="index" :style="{top:item.top,left:item.left,width:item.width}">
        <div class="tittle_box">
            <p class="tittle">{{item.tittle}}</p>
        </div>
        <div class="content_text" v-for="text in item.childrenList" :key="text" >
          {{text}}
        </div>
    </div> 
    <div class="tittle_box_left">
        <p class="tittle">数据调整接口层</p>
    </div>
    <div class="tittle_box_right">
        <p class="tittle">数据调整接口层</p>
    </div>
    <div class="content_box_no">
        <div class="content_text" v-for="text in noList" :key="text" >
          {{text}}
        </div>
    </div>
    <div class="content_box_end">
        <div class="content_text" v-for="text in endList" :key="text" style="margin-right:1.8479166666666665vw;margin-bottom:0">
          {{text}}
        </div>
    </div> 
    <div class="three_line"></div>
    <div class="tree"></div> 
    <div class="consu_content_box">
      <div class="consu_content" v-for="text in consuList" :key="text">
        {{text}}  
      </div>  
    </div>  
  </div>
</template>

<script>
export default {
    name:'Consumption',
    data(){
      return{
        tittleBoxList:[{tittle:'核心系统',top:'13.984374999999998vw',left:'7.760416666666667vw',width:'14.583333333333334vw',childrenList:['核心系统','总行审批系统','征信系统']},
        {tittle:'e-smart',top:'33.151041666666664vw',left:'7.760416666666667vw',width:'14.583333333333334vw;',
        childrenList:['准入模型','授信模型','机构从业人员管理','合作机构风险监测','业务过程风险模型','贷后监测预警模型']},
        {tittle:'消费分期业务平台',top:'16.770833333333332vw',left:'27.317708333333336vw',width:'14.583333333333334vw;',
        childrenList:['线索池','业务办理','审批管理','合作机构管理','贷后管理','作业过程风险管理','产品管理','大数据中心','风险数据聚合']},
        {tittle:'业务申请端',top:'21.192708333333332vw',left:'63.307291666666664vw',width:'10.78125vw',childrenList:['二维码','+','HS']},
        {tittle:'业务操作端',top:'36.21875vw',left:'63.307291666666664vw',width:'10.78125vw',childrenList:['客户经理','合作机构','合作商户']},],
        noList:['用户自主','合作商户','总对总平台','客户经理','营销人员'],
        endList:['分期信息采集','材料收集','上门调查','合同签署','抵解押办理'],
        consuList:['税务','法院','车管','征信机构','保险','工信部','银联','...']
      }
    }
}
</script>

<style scoped>
.consu_content_box{
  position: absolute;
  width:41.458333333333336vw;
  height:2.4479166666666665vw;
  top:13.229166666666666vw;
  left:49.296875vw;
  display: flex;
}
.consu_content{
  width:4.244791666666667vw;
  height:2.4479166666666665vw;
  margin-right:0.9375vw;
  background: url('../../assets/img/consu_content.png');
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.78125vw;
  font-family: YouSheBiaoTiHei;
  color: #FFFFFF;
}
.tree{
  position: absolute;
  width:0.26041666666666663vw;
  height:7.109375vw;
  top:38.946875vw;
left:90.3125vw;
background: #2966A7;
}
.three_line{
  position: absolute;
  border: 0.58671875vw solid;
  border-color: rgba(185, 186, 197, 0) #2966A7 rgba(16, 38, 240, 0) rgba(51, 52, 61, 0);
  top:41.88020833333333vw;
  left:88.87916666666667vw;
}
.content_box{
  position: absolute;
  width:14.583333333333334vw;
  background: rgba(93, 197, 238, 0.05);
  border-radius: 0.10416666666666667vw;;
  border: 0.052083333333333336vw dashed #5DC5EE;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 0.5729166666666666vw;
}
.content_box_no{
  width:10.78125vw;
  position: absolute;
  background: rgba(93, 197, 238, 0.05);
  border-radius: 0.10416666666666667vw;;
  border: 0.052083333333333336vw dashed #5DC5EE;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:1.328125vw 0 1.328125vw 0;
  top:22.265625vw;
left:81.45833333333333vw;
}
.content_box_end{
  width:12.473958333333334vw;
  height:7.109375vw;
  top:38.946875vw;
  left:76.71875vw;
  position: absolute;
  background: rgba(93, 197, 238, 0.05);
  border-radius: 0.10416666666666667vw;;
  border: 0.052083333333333336vw dashed #5DC5EE;
  display: flex;
  flex-wrap: wrap;
  padding:1.0677083333333333vw 0 0 1.5885416666666665vw;
}
.tittle_box{
  width:10.78125vw;
  height:2.083333333333333vw;
  background: #2966A7;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-50%);
}
.tittle_box_left{
  position: absolute;
  width:14.583333333333334vw;
height:2.083333333333333vw;
top:27.500000000000004vw;
left:7.760416666666667vw;
background: #2966A7;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-50%);
}
.tittle_box_right{
  position: absolute;
width:10.78125vw;
height:2.083333333333333vw;
top:49.776041666666664vw;
left:63.307291666666664vw;
background: #2966A7;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-50%);
}
.tittle{
  font-size: 1.0416666666666665vw;
  font-family: YouSheBiaoTiHei;
  color: #FFFFFF;
}
.content_text{
font-size: 0.78125vw;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
margin-bottom: 1.3802083333333333vw;
}
</style>